<template>
  <div>
    <!-- 导航栏 -->
    <nav class="hot-list-nav">
      <ul>
        <li
            v-for="category in categories"
            :key="category.value"
            :class="{ active: selectedCategory === category.value }"
            @click="selectedCategory = category.value"
        >
          <span class="icon">{{ category.icon }}</span>
          {{ category.label }}
        </li>
      </ul>
    </nav>
  </div>
  <div class="hot-list-container">
    <!-- 热榜内容 -->
      <HotListPanel
          v-if="(selectedCategory === 'all'||selectedCategory==='general')"
          :data="zhihuData"
          :logo-url="'https://www.zhihu.com/favicon.ico'"
          :ribbonText="'知乎'"
          :ribbon-color="'#0176FF'"
          :title="'知乎热榜'"
          :update-time="'1小时前'"
      />
      <HotListPanel
          v-if="(selectedCategory === 'all'||selectedCategory === 'general')"
          :data="weiboData"
          :logo-url="'https://s.weibo.com/favicon.ico'"
          :ribbonText="'微博'"
          :ribbon-color="'#FF8200'"
          :title="'微博热搜'"
          :update-time="'1小时前'"
      />
      <HotListPanel
          v-if="(selectedCategory === 'all'||selectedCategory === 'coding')"
          :data="codingData"
          :logo-url="'https://www.codefather.cn/favicon.ico'"
          :ribbonText="'编程导航'"
          :ribbon-color="'#178FFD'"
          :title="'编程导航'"
          :update-time="'1天前'"
      />
      <HotListPanel
          v-if="(selectedCategory === 'all'||selectedCategory === 'coding')"
          :data="csdnData"
          :logo-url="'https://blog.csdn.net/favicon.ico'"
          :ribbonText="'CSDN'"
          :ribbon-color="'#FC5531'"
          :title="'CSDN热榜'"
          :update-time="'1小时前'"
      />
  </div>
</template>

<script lang="ts" setup>
import HotListPanel from './components/HotListPanel.vue';
import {ref} from "vue";

// 模拟数据
const zhihuData = [
  {title: '美国人超市疯抢中国货，美亿万富翁也...', heat: '2917.0万'},
  {title: '公司买了一条狗入账，财务应该走什么...', heat: '505.0万'},
  {title: '胖东来起诉「红内裤」事件博主，追责...', heat: '293.0万'},
  {title: '如何评价张国立、佟大为、梅婷主演的...', heat: '172.0万'},
  {title: '普通人的人生的容错率真的很高吗？', heat: '164.0万'},
  {title: '特朗普任后遭遇首次大规模抗议，美 50 ...', heat: '164.0万'},
  {title: '如何评价Meta刚刚发布的LLama 4系列...', heat: '164.0万'},
  {title: '如何看待2025年新国辩小组赛武汉大学...', heat: '152.0万'},
  {title: '如何看待2025年新国辩小组赛武汉大学...', heat: '152.0万'},
];

const weiboData = [
  {title: '甲亢哥扫货被提醒后细心放好手机', heat: '129.1万'},
  {title: '人的身高70%取决于父母', heat: '56.6万'},
  {title: '清明节气的春耕气象密码', heat: '53.4万'},
  {title: '杨幂 内娱史官', heat: '52.8万'},
  {title: '美国50万人游行要求特朗普住手', heat: '51.9万'},
  {title: '家长称高中双休影响孩子考好大学', heat: '51.0万'},
  {title: '爱情公寓的转场方式还是太超前了', heat: '45.6万'},
  {title: '张峻豪演唱会', heat: '36.1万'},
];

const codingData = [
  {title: '24届民办专升本找工作总结', heat: '1890'},
  {title: '分享一个 Boss 批量投递的方法：1', heat: '1630'},
  {title: '学历：起点之锚，非人生彼岸', heat: '1470'},
];

const csdnData = [
  {title: 'FAISS向量数据库原理(详解)-以及如何解决...', heat: '1.6万'},
  {title: 'AIGC时代Kubernetes企业级云原生运维实...', heat: '1.2万'},
  {title: '【C++指南】模板VS手写代码：这场效率...', heat: '1.1万'},
];
// 模拟导航栏分类数据
const categories = [
  {value: 'all', icon: '✨', label: '全部'},
  {value: 'general', icon: '🌈', label: '综合资讯 & 讨论社区'},
  {value: 'coding', icon: '💡', label: '技术 & 编程'},
  {value: 'video', icon: '📺', label: '视频 & 娱乐'},
  {value: 'music', icon: '🎶', label: '音乐热榜'},
  {value: 'goods', icon: '📷', label: '好物分享'},
  {value: 'sports', icon: '⚽', label: '体育赛事'},
];

// 当前选中的分类
const selectedCategory = ref('all');
</script>

<style scoped>
.hot-list-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.hot-list-nav {
  background-color: #fff;
  border-bottom: 1px solid #eaeaea;
}

.hot-list-nav ul {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}

.hot-list-nav li {
  cursor: pointer;
  padding: 10px 20px;
  font-size: 16px;
  color: #333;
  transition: all 0.3s ease;
}

.hot-list-nav li.active {
  color: #ff6700; /* 高亮颜色 */
  border-bottom: 2px solid #ff6700;
}

.hot-list-nav .icon {
  margin-right: 5px;
  font-size: 18px;
}

/* 热榜容器样式 */
.hot-list-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 20px;
}
</style>
